<!--
 * @Author: zhangyang
 * @Date: 2021-09-09 10:31:15
 * @LastEditTime: 2021-09-18 14:17:05
 * @Description: 注册
-->
<script lang="ts" setup>
import { get_verify_code, login, register } from "../../api/user";
import { isMobile } from "../../util/valid";
import { setToken } from "../../util/auth";
import { conf } from '../../store/index';
import { useVerifyCode } from "../../hooks/useVerifyCode";
import { useToggle } from "@vant/use";
import type { FormInstance } from 'vant';
import { generateUserInfo } from "../../util/generateUserInfo";

const formRef = ref<FormInstance>();
const router = useRouter();
const form = ref<Form_Register>({
  tel: '',
  passwd: '',
  code: '',
});
const { countDown, isClicked, sendClick } = useVerifyCode();
const isReaded = ref(true);
const showPopup = ref(false);
const popupContent = ref(conf.value.xie_yi);
const read = (type: 0 | 1) => {
  if (type === 0) {
    popupContent.value = conf.value.xie_yi;
  } else {
    popupContent.value = conf.value.yin_si_zheng_ce;
  }
  showPopup.value = true;
};
const [showPass, toggle] = useToggle(false);

const loginHandler = async () => {
  try {
    await formRef.value?.validate();
    if (!isReaded.value) {
      Toast('请先同意服务协议！');
      return;
    }
    await register(form.value);
    const data = await login(form.value);
    if (data) {
      setToken(data as unknown as UserKey);
      await generateUserInfo();
      router.push({ name: 'main' })
    }
  } catch (error) {
    return;
  }
}
</script>
<template>
  <van-nav-bar
    title="注册"
    safe-area-inset-bottom
  />
  <div class="w-full h-full mt-10">
    <van-form  ref="formRef">
      <van-cell-group inset>
        <van-field
          v-model.trim="form.tel"
          placeholder="手机号"
          :rules="[
            { required: true, message: '请填写手机号' },
            { validator: isMobile, message: '请输入合法的手机号' }
          ]"
        />
        <van-field
          v-model.trim="form.passwd"
          placeholder="密码"
          :type="!showPass ? 'password' : 'text'"
          :rules="[{ required: true, message: '请填写密码' }]"
        >
          <template #right-icon>
            <van-icon :name="showPass ? 'eye' : 'closed-eye'" @click="toggle(!showPass)" />
          </template>
        </van-field>
        <van-field
          v-model.trim="form.code"
          placeholder="验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
        >
          <template #button>
            <van-button
              v-if="!isClicked"
              size="small"
              type="primary"
              plain
              @click="sendClick"
            >发送验证码</van-button>
            <van-button
              v-else
              size="small"
              :disabled="true"
            >
              {{ countDown.current.value.seconds }}秒后重发
            </van-button>
          </template>
        </van-field>
      </van-cell-group>
      <van-checkbox
        v-model="isReaded"
        shape="square"
        icon-size="small"
        class="p-4"
      >
        我已阅读并同意
        <a class=" text-purple-500" @click.prevent="read(0)">服务协议</a>
        与
        <a class=" text-purple-500" @click.prevent="read(1)">隐私政策</a>
      </van-checkbox>
      <div class="m-4">
        <van-button block type="primary" @click="loginHandler">
          注册
        </van-button>
      </div>
    </van-form>
    <van-popup
      v-model:show="showPopup"
      position="center"
      :style="{ height: '80%', width: '90%', overflow: 'auto' }"
    >
      <div v-html="popupContent" />
    </van-popup>
  </div>
</template>
